{{ template "header" . }}

<!-- TODO Implement "flash" messages in session
<div class=success>
    {{ svg "check-circle" }}
    Settings updated successfully.
</div>
-->

{{ template "golfer" . }}

<main id=two-pane>
    {{ template "nav" . }}

{{ if eq .Title "Settings: General" }}
    <form method=post>
        <h2>About</h2>

        Write a little about yourself.

        <textarea maxlength=255 name=about rows=4>{{ .Golfer.About }}</textarea>

        <h2>Country</h2>

        Is used in aggregate on the statistics page.
        Showing it publicly will put a little flag next to your name.

        <select name=country>
            <option value>Rather not say
        {{ $country := "" }}
        {{ with .Golfer.Country }}{{ $country = .ID }}{{ end }}
        {{- range $continent, $countries := .Data.Countries -}}
            <optgroup label="{{ $continent }}">
            {{- range $countries -}}
                <option value="{{ .ID }}"
                    {{- if eq .ID $country }} selected{{ end }}>
                    {{- .Flag }}&ensp;{{ .Name -}}
            {{- end -}}
        {{- end -}}
        </select>

        <label>
            Show my country publicly?
            <input name=show_country type=checkbox
                {{ if .Golfer.ShowCountry }}checked{{ end }}>
        </label>

        <h2>Pronouns</h2>

        Preferred pronouns.

        <select name=pronouns>
            <option value>Rather not say
        {{- range .Data.Pronouns -}}
            <option {{- if eq . $.Golfer.Pronouns.V }} selected{{ end }}>
                {{- . -}}
        {{- end -}}
        </select>

        <h2>Referrer</h2>

        Which golfer referred you to Code Golf?
        They will earn a badge for their profile from this.

        <datalist id=golfers></datalist>
        <input autocomplete=off data-ignore="{{ .Golfer.Name }}" list=golfers
            name=referrer value="{{ .Golfer.Referrer }}">

        <h2>Theme</h2>

        Preferred set of colors for the user interface.

        <fieldset>
            {{- range .Data.Themes -}}
                <label>
                    <input name=theme type=radio value="{{ . }}"
                        {{- if eq . $.Golfer.Theme }} checked{{ end }}>
                        {{- title . -}}
                </label>
            {{- end -}}
        </fieldset>

        <h2>Time Zone</h2>

        Affects how times are displayed and might eventually affect when date
        specific achievements are awarded.

        <select name=time_zone>
            <option value>Rather not say
        {{- range .Data.TimeZones -}}
            <option value="{{ .Name }}"
                {{- if eq .Name $.Golfer.TimeZone.V }} selected{{ end }}>
                {{- . -}}
        {{- end -}}
        </select>

        <p><button class="btn green">Save Changes</button>
    </form>
{{ else if eq .Title "Settings: Connections" }}
    <form method=post>
        <h2>Connections</h2>

        Will eventually allow for logging in with any supported OAuth
        connection.

        <ol id=connections>
        {{ range .Data.Connections }}
            <li>
            {{ with .AvatarURL }}
                <img src="{{ avatar . 96 }}">
            {{ else }}
                {{ svg .Connection }}
            {{ end }}
                <h3>
                    <span>{{ .Connection }}/</span>
                    {{- .Username -}}
                {{- with .Discriminator.V -}}
                    <span>{{ printf "#%04d" . }}</span>
                {{- end -}}
                </h3>
                <div>
                {{ if ne .Connection "github" }}
                    {{ $prov := index $.Data.OAuthProviders .Connection }}
                    <a class="btn blue" href="{{ $prov.AuthCodeURL $.Data.OAuthState }}">
                        {{ svg "arrow-clockwise" }}<span class=wide>Refresh</span>
                    </a>
                    <a class="btn red" href="/golfer/disconnect/{{ .Connection }}">
                        {{ svg "trash" }}<span class=wide>Remove</span>
                    </a>
                {{ end }}
                </div>
                <label>
                    Show this connection publicly?
                    <input name="show_{{ .Connection }}" type=checkbox
                        {{ if .Public }}checked{{ end }}>
                </label>
        {{ end }}
        </ol>

{{ if ne (len .Data.Connections) (len .Data.OAuthProviders) }}
        <div id=missingConnections>
    {{ range $id, $conn := .Data.OAuthProviders }}
        {{ $missing := true }}

        {{ range $.Data.Connections }}
            {{ if eq $id .Connection }}
                {{ $missing = false }}
                {{break}}
            {{ end }}
        {{ end }}

        {{ if $missing }}
            <a class="btn blue" href="{{ $conn.AuthCodeURL $.Data.OAuthState }}">
                {{ svg $id }} Add {{ $conn.Name }}
            </a>
        {{ end }}
    {{ end }}
        </div>
{{ end }}
        <p><button class="btn green">Save Changes</button>
    </form>
{{ else if eq .Title "Settings: Export Data" }}
    <h2>Export Data</h2>

    <p>You can export your data <a href=/golfer/export>here</a>.
{{ else if eq .Title "Settings: Delete Account" }}
{{ if .Golfer.Delete.Valid }}
    <form action=/golfer/cancel-delete method=post>
        <h2>Cancel Deletion</h2>

        Will cancel the scheduled permanent deletion of this account and all
        its data.

        <p><button class="btn green">Cancel Deletion</button>
    </form>
{{ else }}
    <form action=/golfer/delete method=post>
        <h2>Delete Account</h2>

        Will schedule this account and all its data to be permanently deleted
        in 14 days. Inside this window the schedule can be cancelled.

        <p><button class="btn red">Delete Account</button>
    </form>
{{ end }}
{{ end }}
</main>

{{ template "footer" }}
